<template>
	<view class="cart-container">
		<!-- 滚轮 -->
		<scroll-view scroll-y class="viewport">
			<template v-if="token">
				<!-- 标题 -->
				<view class="tips">
					<text class="label">满减</text>
					<text class="desc">满1件, 即可享受9折优惠</text>
				</view>
				<!-- 购物车  -->
				<view class="carts-list" v-if="cartList.length">
					<uni-swipe-action>
						<block v-for="goods in cartList" :key="goods.id">
							<uni-swipe-action-item :right-options="options"
								@click='deleteGoodsHandler($event,goods.skuId)'>
								<my-goods :goods='goods' @updateSelected='updateSelected'
									@updateCount='updateCount'></my-goods>
							</uni-swipe-action-item>
						</block>
					</uni-swipe-action>
				</view>
				<!-- 购物车为空的时候 -->
				<view class="empty-cart" v-else>
					<text class="tip-text">购物车还是空的,快来挑选好物吧</text>
				</view>
			</template>
			<!-- 状态提示 -->
			<view class="blank" v-else>
				<text>登后后可查看购物车中的商品</text>
				<navigator url="/pages/login/login" hover-class="none">
					<button class="button">去登录</button>
				</navigator>
			</view>
		</scroll-view>

		<!-- 猜你喜欢 -->
		<view class="caption">
			<text class=" text">猜你喜欢</text>
		</view>
		<!-- 猜你喜欢商品列表 -->
		<view class="guess">
			<block v-for="item in guessList" :key="item.id">
				<my-like :item='item' @click.native='gotoDetail(item.id)'></my-like>
			</block>
		</view>

		<!-- 结算区域 如果购物车没有内容 不显示-->
		<template>
			<my-settle :checkedCount='checkedCount' :checkedAllPrice='checkedAllPrice' :alltotals='alltotals'
				@updateAllChecked='updateAllChecked' v-if="cartList.length"></my-settle>
		</template>
	</view>

</template>

<script>
	import {
		getMemberCart,
		delMemberCart,
		putMemberCartSelected,
		putMemberCart
	} from "@/api/cart.js"
	import {
		getguessLike
	} from "@/api/index.js"
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				options: [{
					text: '收藏', // 显示的文本内容
					style: {
						backgroundColor: '#ffa868' // 按钮的背景颜色
					}
				}, {
					text: '删除', // 显示的文本内容
					style: {
						backgroundColor: '#C00000' // 按钮的背景颜色
					}
				}],
				cartList: [],
				guessList: [],
				params: {
					page: 1,
					pageSize: 10,
				},
				total: 0,
				// 设置节流阀，数据加载完后在请求下一次数据
				isLoading: false
			}
		},
		onLoad(options) {
			// this.id = options.id   id: 4000914
			this.getCartList()
			this.getGussList()
		},
		onShow() {
			this.setBadge()
			if (this.token) {
				this.getCartList()
			}

		},
		watch: {
			checkedCount: {
				handler() {
					this.setBadge()
				},
				deep: true,
				immediate: true
			}

		},
		computed: {
			...mapState('user', ['token']),
			// 总数量
			alltotals() {
				const totals = this.cartList.reduce((prev, next) => {
					return prev += next.count
				}, 0)
				return totals
			},
			// 获取总数量
			// 1.先过滤出已经勾选商品的状态
			// 2.通过状态对每个商品的数量进行累加
			// 总数
			checkedCount() {
				const allCount = this.cartList.filter(item => item.selected).reduce((prev, next) => {
					return prev += next.count
				}, 0)
				return allCount
			},
			// 获取总的价格
			checkedAllPrice() {
				const allPrice = this.cartList.filter(item => item.selected).reduce((prev, next) => {
					return prev += next.count * next.price
				}, 0)
				return allPrice
			}
		},
		methods: {
			gotoDetail(id) {
				uni.navigateTo({
					url: '/subpkg/goods_detail/goods_detail?id=' + id
				})
			},
			// 当改变选购数量的时候 getCartList里面的数量同步修改
			async updateCount(count) {
				const result = this.cartList.find(item => item.skuId === count.skuId)
				result.count = count.count
				await putMemberCart(count)

			},
			// 点击按钮后状态取反
			async updateSelected(stock) {
				const result = this.cartList.find(item => item.stock === stock)
				result.selected = !result.selected
				await putMemberCartSelected(!result.selected)

			},
			// 点击之后改变全选
			async updateAllChecked(newState) {
				this.cartList.forEach(item => item.selected = newState)
				await putMemberCartSelected(newState)

			},
			// 删除/清空购物车单品
			// 点击向左滑动后再点击删除按钮
			async deleteGoodsHandler(e, id) {
				if (e.index === 1) {
					await delMemberCart([id])
				}
				uni.showToast({
					title: '删除成功',
					duration: 2000,
					icon: 'success',
				})
				this.getCartList()
			},

			// 获取购物车列表
			async getCartList() {
				const res = await getMemberCart()
				this.cartList = res.result
			},
			// 获取猜你喜欢
			async getGussList() {
				// 打开节流阀
				this.isLoading = true
				const {
					result
				} = await getguessLike({
					page: this.params.page,
					pageSize: this.params.pageSize
				})
				this.isLoading = false
				this.total = result.total
				this.guessList = [...this.guessList, ...result.items]
			},
			setBadge() {
				// 调用 uni.setTabBarBadge() 方法，为购物车设置右上角的徽标
				uni.setTabBarBadge({
					index: 2,
					text: this.checkedCount ? this.checkedCount + '' : null, // 注意：text 的值必须是字符串，不能是数字
				})
			}
		},
		// 上拉触底事件
		onReachBottom() {
			if (this.guessList.length >= this.total) return
			uni.showToast({
				title: '数据正在加载....',
				duration: 100,
				icon: 'none',
			})

			if (this.isLoading) return
			// 1.页面+1
			this.params.page = ++this.params.page
			// 2.重新加载页面
			this.getGussList()

		}
	}
</script>

<style lang="scss">
	.cart-container {
		padding-bottom: 50px;
	}

	page {
		// height: 100%;
		background-color: #f7f7f8;
	}

	* {
		margin: 0;
	}

	// .viewport {
	//     min-height: 400rpx;
	// }

	// swiper,
	// scroll-view {
	//     flex: 1;
	//     height: 100%;
	//     overflow: hidden;
	// }

	// view,
	// navigator,
	// input,
	// scroll-view {
	//     box-sizing: border-box;
	// }

	// scroll-view {
	//     display: block;
	//     width: 100%;
	// }

	// 头部
	.tips {
		display: flex;
		align-items: center;
		line-height: 1;
		padding: 30rpx;
		font-size: 26rpx;
		color: #666;
	}

	.tips .label {
		color: #fff;
		padding: 7rpx 15rpx 5rpx;
		border-radius: 4rpx;
		font-size: 24rpx;
		background-color: #27ba9b;
		margin-right: 10rpx;
	}

	text {
		cursor: text;
	}

	// 购物车
	.cartsList {
		padding: 0 20rpx;
	}

	.empty-cart {
		padding: 100rpx 0 60rpx;
		text-align: center;
		color: #444;
		font-size: 26rpx;
	}

	// 猜你喜欢

	.caption {
		display: flex;
		justify-content: center;
		line-height: 1;
		padding: 36rpx 0 40rpx;
		font-size: 32rpx;
		color: #262626;
	}

	.caption .text {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 28rpx 0 30rpx;
	}

	.caption .text::before,
	.caption .text::after {
		content: "";
		width: 20rpx;
		height: 20rpx;
		background-image: url('../../static/images/bubble.png');
		background-size: contain;
		margin: 0 20rpx;
		margin-top: 0rpx;
		margin-right: 10rpx;
		margin-bottom: 0rpx;
		margin-left: 10rpx;
	}

	// 商品列表页面
	.guess {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 20rpx;
	}

	/* 购物车商品 */
	/* 购物车状态提示 */
	.blank {
		padding: 100rpx 0 60rpx;
		text-align: center;
		color: #444;
		font-size: 26rpx;

		.button {
			width: 240rpx !important;
			height: 60rpx;
			line-height: 60rpx;
			margin-top: 25rpx;
			font-size: 26rpx;
			border-radius: 60rpx;
			color: #fff;
			background-color: #27ba9b;

			&::after {
				display: none;
			}
		}
	}
</style>